import {Button, IconButton, TextField} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import styled from "@emotion/styled";
import {useState} from "react";

type IProps = {
    onConfirm: (text: string) => void;
    isSearchEditing: boolean;
    setIsSearchEditing: (isEditing: boolean) => void;
}

const TopBarArea = ({onConfirm, isSearchEditing, setIsSearchEditing}: IProps) => {
    const [text, setText] = useState('');

    const handleSearchTextChange = (e: {
        target: {
            value: string
        }
    }) => {
        setText(e.target.value);
    };

    const handleConfirm = (e: { preventDefault: () => void }) => {
        e.preventDefault();
        onConfirm(text);
    };

    return <>
        {!isSearchEditing &&
            <MainButton onClick={setIsSearchEditing.bind(null, true)}>
                <SearchIcon/>
            </MainButton>
        }
        {
            isSearchEditing && <MaskArea onSubmit={handleConfirm}>
                <TextField
                    style={{
                        width: '60%',
                    }}
                    autoFocus
                    label="搜索"
                    variant="outlined"
                    placeholder="例如：吃饭"
                    onChange={handleSearchTextChange}
                    slotProps={{
                        htmlInput: {
                            enterKeyHint: 'search',
                        },
                    }}
                />
                <Button style={{marginLeft: '16px'}} variant="contained" onClick={handleConfirm}>确定</Button>
                <Button variant="text" onClick={setIsSearchEditing.bind(null, false)}>取消</Button>
            </MaskArea>
        }
    </>;
};

const MainButton = styled(IconButton)`
    position: fixed;
    top: 16px;
    left: 16px;
`;

const MaskArea = styled.form`
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 160px;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    display: flex;
    justify-content: center;
    align-items: center;

`;

export default TopBarArea;